<!DOCTYPE html> 
<html> 
	<head> 
	<title>Rightsize Demo</title> 	
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="rightsize2.min.css" />
	<script type="text/javascript" charset="utf-8" src="js/phonegap-1.1.0.js"></script>
	
	<script type="text/javascript" src="js/barcodescanner.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script src="js/jquery-1.6.4.min.js"></script> 
 	<script src="js/jquery.mobile-1.0rc2.min.js"></script>
     	<script src="js/jquery.mobile.collapsible.js"></script>

<?

    alert('beforeshow');

?>

	<link rel="stylesheet" href="css/rightsize2.min.css" />
    	<link rel="stylesheet" href="css/main.css" />
	<link rel="stylesheet" href="css/jquery.mobile.structure-1.0rc2.min.css" /> 


</head> 
<body> 

    <div data-role="page" id="seite1" data-title="Profil">
        <div data-role="header" data-position="inline">
            <a href="#seite2" data-role="button" data-icon="plus" data-iconpos="notext" style="margin-top: 5px"></a> 
            <h1 style="margin-top: 12px;text-align:center">Profil</h1>
                    <div style="text-align:right;margin-top:-35px;margin-bottom:5px;margin-right:10px">
                        <select name="geschlecht" id="cbgeschlecht" data-theme="a" data-icon="arrow-d" data-inline="true" data-native-menu="false" >
                             <option value="maennlich">M&auml;nnlich</option>
                             <option value="weiblich">Weiblich</option>
                    </select>
                </div>
    
        </div>
       
        <div class="ui-body ui-body-a">
            <div data-role="content">	
                 <div role="contentinfo" data-theme="c" class="ui-bar " >
                    <label for="name" style="margin-left:-17px;">Name:</label>
                    <div class="ui-block-a" style="margin-left:60px; width:200px; margin-top: -30px;">
                        <input type="text" name="name" id="name" value=""  />
                    </div>	    
                </div>
                <a href="#seite2" data-role="button" data-icon="arrow-r" style="margin-top: 6px; width:260px; margin-left:-9px;">automatisch Berechnen</a> 
                
                <div data-role="collapsible-set" data-theme="b" data-content-theme="b">
                    <div data-role="collapsible">
                        <h3>
                        K&ouml;rperh&ouml;he
                        <div style="text-align:right; margin-top: -20px">
                        178cm
                        </div>
                        </h3>
                        <a href="#seite2" data-role="button" data-icon="info" data-iconpos="notext" style="margin-top: 6px;"></a> 
                        <div  style="margin-left:38px; margin-top: -37px; width:200px">
                                  <input type="number" name="groesse" id="groesse" value="" data-inline="true" />
                        </div>  
                    </div>
                    <div data-role="collapsible" >
                        <h3>Beininnenl&auml;nge
                        <div style="text-align:right; margin-top: -20px">
                        -
                        </div>
                        </h3>
                        <a href="#seite2" data-role="button" data-icon="info" data-iconpos="notext" style="margin-top: 6px;"></a> 
                        <div  style="margin-left:38px; margin-top: -37px; width:200px">
                                  <input type="number" name="beininnenlaenge" id="beininnenlaenge" value="" data-inline="true" />
                        </div>  
                    </div>
                    <div data-role="collapsible">
                        <h3>Brustumfang
                        <div style="text-align:right; margin-top: -20px">
                        -
                        </div>                        
                        </h3>
                        <a href="#seite2" data-role="button" data-icon="info" data-iconpos="notext" style="margin-top: 6px;"></a> 
                        <div  style="margin-left:38px; margin-top: -37px; width:200px">
                                  <input type="number" name="brustumfang" id="brustumfang" value="" data-inline="true" />
                        </div>  
                    </div>
                    <div data-role="collapsible">
                        <h3>Unterbrustumfang
                        <div style="text-align:right; margin-top: -20px">
                        -
                        </div>                        
                        </h3>                        
                        <a href="#seite2" data-role="button" data-icon="info" data-iconpos="notext" style="margin-top: 6px;"></a> 
                        <div  style="margin-left:38px; margin-top: -37px; width:200px">
                                  <input type="number" name="unterbrustumfang" id="unterbrustumfang" value="" data-inline="true" />
                        </div>  
                    </div>    
                    <div data-role="collapsible">
                        <h3>Taillenumfang
                        <div style="text-align:right; margin-top: -20px">
                        -
                        </div>                        
                        </h3>                        
                        <a href="#seite2" data-role="button" data-icon="info" data-iconpos="notext" style="margin-top: 6px;"></a> 
                        <div  style="margin-left:38px; margin-top: -37px; width:200px">
                                  <input type="number" name="taillenumfang" id="taillenumfang" value="" data-inline="true" />
                        </div>  
                    </div>
                    <div data-role="collapsible">
                        <h3>H&uuml;ftumfang
                        <div style="text-align:right; margin-top: -20px">
                        -
                        </div>                        
                        </h3>                             
                            <a href="#seite2" data-role="button" data-icon="info" data-iconpos="notext" style="margin-top: 6px;"></a> 
                            <div  style="margin-left:38px; margin-top: -37px; width:200px">
                                      <input type="number" name="hueftumfang" id="hueftumfang" value="" data-inline="true" />
                            </div>  
                    </div> 
                    <div data-role="collapsible">
                        <h3>Fu&szlig;l&auml;nge
                        <div style="text-align:right; margin-top: -20px">
                        -
                        </div>                        
                        </h3>                             
                            <a href="#seite2" data-role="button" data-icon="info" data-iconpos="notext" style="margin-top: 6px;"></a> 
                            <div  style="margin-left:38px; margin-top: -37px; width:200px">
                                      <input type="number" name="fussinnenlaenge" id="fussinnenlaenge" value="" data-inline="true" />
                            </div>  
                    </div> 
                     <div data-role="collapsible">
                        <h3>Handumfange
                        <div style="text-align:right; margin-top: -20px">
                        -
                        </div>                        
                        </h3>                             
                            <a href="#seite2" data-role="button" data-icon="info" data-iconpos="notext" style="margin-top: 6px;"></a> 
                            <div  style="margin-left:33px; margin-top: -37px; width:200px">
                                      <input type="number" name="handumfang" id="handumfang" value="" data-inline="true" />
                            </div>  
                    </div> 
                </div><!-- /content-a -->
            </div><!-- /body-a -->
        </div>

        <div data-role="footer" class="ui-bar">
          <div data-role="controlgroup" data-type="horizontal">
            <a href="#seite1" data-icon="info" data-transition="fade" data-role="button" style="width:100px">Scannen</a>
            <a href="#seite2" data-icon="info" data-transition="flip" data-role="button" style="width:100px">Favoriten</a>
            <a href="#seite2" data-icon="info" data-transition="flip" data-role="button" style="width:100px">Profil</a>
          </div>
        </div>
    </div><!-- /page1-a -->
    
    <div data-role="page" id="seite2" data-title="Wie messe ich richtig?">
    <div data-role="header" data-position="inline">
        <a href="#seite1" data-role="button" data-direction="reverse" data-icon="arrow-l" style="margin-top: 5px">Zur&uuml;ck</a> 
        <h1 style="margin-top: 12px;text-align:center;margin-bottom:20px">Wie messe ich richtig?</h1>

    </div>    
    <div data-role="content">	
      Hier sollte jetzt ein Bild mit der dazugeörigen Erklärung erscheinen
    </div>
    <div data-role="footer" class="ui-bar">
      <div data-role="controlgroup" data-type="horizontal">
        <a href="#seite1" data-icon="info" data-transition="fade" data-role="button" style="width:100px">Scannen</a>
        <a href="#seite2" data-icon="info" data-transition="flip" data-role="button" style="width:100px">Favoriten</a>
        <a href="#seite2" data-icon="info" data-transition="flip" data-role="button" style="width:100px">Profil</a>
      </div>
    </div>
</div><!-- /page1-b -->
</body>
</html>
